import React, { useRef, useState, useEffect } from "react";
import { Empty, Spin } from "antd";
import styled from "styled-components";
import { useNavigate, useParams, NavLink } from "react-router-dom";
import { discover, NewFileMetadata, updateFileMetadata, deleteFileMetadata } from "../../services/graphql";
import { formatPicUrl } from "../../utils/formatter";
import { idToTypeName } from "../../utils/file-helper";

function Main({ className }) {
	const { q } = useParams();
	const navigate = useNavigate();
	const [list, setList] = useState([]);
	const [isLoading, setIsLoading] = useState(false);

	const init = async () => {
		setIsLoading(true);
		let params = {
			filter: q,
			pageindex: 1,
			pagesize: 100
		};
		let ret = await discover(params);
		setIsLoading(false);
		if (ret.msg == "ok" && ret.data) {
			let arr=ret.data;
			arr.forEach(t=>t.pic=formatPicUrl(t.displayFid,'svg'));
			setList(arr);
		}		
	};
	useEffect(() => {
		init();
	}, []);
	return (
		<div className={className}>
			<Spin spinning={isLoading}>
				<div className="banner">
					<div className="banner-in">
						<div className="icon" style={{backgroundImage:"url("+process.env.PUBLIC_URL+"/img/"+q+".svg)"}}>
							<img width={34} height={34} src={process.env.PUBLIC_URL + "/img/"+q+".png"} />
						</div>
						<div className="right">
							<div>{idToTypeName(q)}</div>
							<span>Share and download free</span>
						</div>
					</div>
				</div>
				<div className="content">
					<div className="box">
						<div className="list">
							{list.map((t, i) => {
								return (
									<div className="item" key={i} onClick={()=>navigate('/detail/'+t.fid)}>
										<div className="pic-box">
											<img width={150} height={220} src={t.pic} />
										</div>
										<div className="title">{t.title}</div>
									</div>
								);
							})}
							{list.length == 0 ? <Empty /> : ""}
						</div>
					</div>
					{!list ? <Empty /> : ""}
				</div>
			</Spin>
		</div>
	);
}

export default styled(Main)`
	display: block;
	.banner {
		background-color: rgb(240, 240, 240);
		width: 100%;
		height: 138px;
		overflow: hidden;
		display: block;
		position: relative;
		top: 0;
		.banner-in {
			width: 888px;
			padding: 20px;
			display: flex;
			flex-direction: row;
			overflow: hidden;
			margin: 0 auto;
			.icon {
				width: 100px;
				height: 100px;
				background-repeat: no-repeat;
				background-size: 78px;
				background-position: center;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.right {
				flex: 1;
				padding: 16px 19px;
				color: #000;
				div {
					font-size: 24px;
					font-weight: bold;
					line-height: 34px;
				}
				span {
					font-size: 14px;
					line-height: 30px;
				}
			}
		}
	}
	.content {
		width: 888px;
		padding: 20px;
		display: block;
		overflow: hidden;
		margin: 0 auto;
		.box {
			width: 100%;
			clear: both;
			margin-bottom: 39px;
			display: block;
			.title-line {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 10px;
				.title {
					font-size: 28px;
					font-weight: bold;
					height: 30px;
					line-height: 30px;
				}
				.more {
					width: 70px;
					height: 30px;
					line-height: 30px;
					display: block;
					overflow: hidden;
					border-radius: 4px;
					background-color: rgba(51, 51, 51, 1);
					color: #fff;
					cursor: pointer;
					text-align: center;
				}
				.more:hover {
					background-color: rgb(85 84 84);
				}
			}
			.list {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.item {
					margin: 2%;
					width: 16%;
					cursor: pointer;
					.pic-box {
						width: 100%;
						height: 220px;
						img {
							width: 100%;
						}
					}
					.title {
						font-size: 13px;
						color: #333333;
						line-height: 18px;
						height: 54px;
						overflow: hidden;
						display: block;
					}
				}
			}
		}
	}
`;
